<template>
	<view class="container">
		<!-- <view class="tip" v-if="type > 0">
			<u-alert :title="info.status === 0 ? '审核中' : info.status === 1 ? '审核通过' : '审核失败'" :type="info.status === 0 ? 'warning' : info.status === 1 ? 'success' : 'error'" :description = "info.status === 2 ? info.prompt : ''"></u-alert>
		</view> -->
		<u-form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
			<view class="form-item">
				<u-form-item label="入圈时间" prop="JoinedOn" labelWidth="130" borderBottom ref="item1">
					<u-input v-model="formData.JoinedOn" border="none" type="number" placeholder="请输入">
						<template slot="suffix">
							<text>年</text>
						</template>
					</u-input>
				</u-form-item>
			</view>
			<view class="form-item">

				<picker mode="selector" :range="radiolist" range-key="label"
					@change=" e => change(e, 'has_time_manage', 'radiolist')">
					<u-form-item label="是否有时间管理" prop="has_time_manage" labelWidth="130" borderBottom>
						<u-input
							:value="formData.has_time_manage != '' ? radiolist.find(i=>i.value === formData.has_time_manage).label : ''"
							disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u-input>

						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
			</view>
			<view class="form-item">

				<picker mode="selector" :range="radiolist" range-key="label"
					@change=" e => change(e, 'has_deep_knowledge', 'radiolist')">
					<u-form-item label="是否深度了解该圈" prop="has_deep_knowledge" labelWidth="130" borderBottom>
						<u-input
							:value="formData.has_deep_knowledge != '' ? radiolist.find(i=>i.value === formData.has_deep_knowledge).label : ''"
							disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
			</view>
			<view class="form-item">
				<u-form-item label="该圈人群年龄" prop="target_audience" labelWidth="130" borderBottom>
					<u-input v-model.number="formData.target_audience" border="none" placeholder="请输入"></u-input>
				</u-form-item>
			</view>
			<view class="form-item">
				<u-form-item label="提供logo素材" prop="logo" labelWidth="120">
					<view class="layout-img-list">
						<view class="layout-img-list-item" v-if="formData.logo" @click="upload('logo')">
							<image :src="formData.logo" mode="" class="layout-img-list-item-image" mode="aspectFill">
							</image>
						</view>
						<view class="layout-img-list-add" @click="upload('logo')" v-else>
							<image :src="ossUrl +  '/static/image/组149.png'" mode=""></image>
						</view>
					</view>
				</u-form-item>
			</view>

			<view class="form-item" style="margin-top: 20rpx;">
				<picker mode="selector" :range="actions" range-key="label"
					@change=" e => change(e, 'circle_classification_id', 'actions')">
					<u-form-item label="归属类别" prop="circle_classification_id" labelWidth="80"
						@click="showClass = true; hideKeyboard()">
						<u--input
							:value="formData.circle_classification_id ? actions.find(i=>i.value === formData.circle_classification_id).label : ''"
							disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>

						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
			</view>

			<view class="form-item" style="margin-top: 10rpx;">
				<u-form-item label="身份设置" prop="identity" labelWidth="80" labelPosition="top">
					<view class="card">
						<!-- <view class="card-title">身份设置</view> -->
						<view class="card-switch flex-row-between" v-for="(it,index) in formData.identity">
							<view>
								{{it.name}}
							</view>
							<view class="flex-row">
								<u-switch v-model="it.status" :activeValue="1" :inactiveValue="0"
									@change="e => identityChange(e, it)" activeColor="#64aa6b" size="20"></u-switch>
								<view class="description">{{it.status === 0 ? '自由选择' : '需要申请'}}</view>
								<u-icon name="close" color="#e4393c" size="18" @click="delItem(index)"></u-icon>
							</view>
						</view>
						<view class="add" v-if="is_add">
							<view class="add-input">
								<input type="text" placeholder="请输入" v-model="identityValue"
									placeholder-class="add-input-plac">
							</view>
							<view class="add-r">
								<u-icon name="checkmark" color="#00e121" size="18" style="margin-right: 10rpx;"
									@click="save"></u-icon>
								<u-icon name="close" color="#e4393c" size="18" @click="del"></u-icon>
							</view>
						</view>
						<view class="add-btn flex-row-center" @click="open">+</view>
					</view>
				</u-form-item>
			</view>

			<view class="form-item" style="margin-top: 10rpx;">
				<u-form-item label="自我介绍" prop="introduction" labelWidth="80">
					<u-textarea placeholder="写出你在本圈的经验" v-model="formData.introduction" border="none"></u-textarea>
				</u-form-item>
			</view>
			<view class="form-item" style="margin-top: 20rpx;" v-if="Is_it_displayed === 0" @click="toPage">
				<u-form-item prop="circle_classification_id">
					<view style="color:#e4393c">您申请前，请先实名认证</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			<view class="form-item" style="margin-top: 20rpx;" v-if="Is_it_displayed === 0" @click="toPage">
				<u-form-item prop="circle_classification_id">
					<view class="help" @click="toRule" style="margin-bottom: 10rpx;">
						<image :src="ossUrl +  '/static/image/wenhao.png'" mode=""></image>
						{{content}}
					</view>
				</u-form-item>
			</view>
		</u-form>

		<view class="bottom-btn" @click="submit" v-if="Is_it_displayed != 0">提交审核</view>
	</view>
</template>

<script>
	import {
		uploadImg
	} from '@/common/upload.js'
	import {
		circle_classification,
		circle_host,
		Is_it_an_administrator,
		circle_permission,
		InformationHelpContent
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				formData: {
					circle_id: '',
					JoinedOn: '',
					has_time_manage: '',
					has_deep_knowledge: '',
					target_audience: '',
					logo: '',
					circle_classification_id: '',
					identity: [],
					introduction: ''
				},
				rules: {
					JoinedOn: {
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['blur', 'change'],
					},
					logo: {
						type: 'string',
						required: true,
						message: '请上传',
						trigger: ['blur', 'change'],
					},
					target_audience: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change'],
					},
				
					has_time_manage: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change'],
					},
					has_deep_knowledge: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change'],
					},
					circle_classification_id: {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							return !!this.formData.circle_classification_id
						},
						message: '请选择',
						trigger: ['blur', 'change'],
					},
					identity: {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							if (value.length === 0) {
								return callback(new Error('请添加身份设置！'));
							}

							let status = true
							value.forEach(i => {
								if (value.filter(j => j.name === i.name).length > 1) {
									status = false
								}
							})

							if (!status) {
								return callback(new Error('不能有重复的身份名字！'));
							}
							return callback();

						},
						// message: '请选择',
						trigger: ['blur', 'change'],
					},
					
					introduction: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change'],
					},
				},
				identityValue: '',
				is_add: false,
				radiolist: [{
						value: '0',
						label: '否'
					},
					{
						value: '1',
						label: '是'
					}
				],
				actions: [],
				type: 0,
				Is_it_displayed: 0,
				content: ''
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(e) {
			this.formData.circle_id = e.id
			// Is_it_an_administrator({circle_id: e.id}).then(res=>{
			// 	this.type = res.data
			// })
			
			circle_classification().then(res => {
				this.actions = res.data.map(i => ({
					label: i.name,
					value: i.id
				}))
			})
			
			InformationHelpContent({id: 20}).then(res=>{
				this.content = res.data.name
			})
		},
		onShow() {
			this.getPermission()
		},
		methods: {
			toPage(){
				uni.navigateTo({
					url:'/pagesA/authenticationCenter/authenticationCenter'
				})
			},
			getPermission(){
				
				circle_permission({circle_id: this.formData.circle_id}).then(res=>{
					this.Is_it_displayed = res.data.Is_it_real_name
				})
			},
			change(e, field, range) {
				console.log('e', e)
				this.formData[field] = this[range][e.detail.value].value
			},
			upload(field) {
				uploadImg().then(res => {
					console.log('res', res)
					this.formData[field] = res.data.url
				})
			},
			delItem(index) {
				this.formData.identity.splice(index, 1)
			},
			identityChange(e, it) {
				console.log('e', e)
			},
			open() {
				this.identityValue = ''
				this.is_add = true
			},
			save() {
				this.formData.identity.push({
					name: this.identityValue,
					status: 0
				})
				this.del()
			},
			del() {
				this.identityValue = ''
				this.is_add = false
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					
					uni.showLoading({
						mask: true,
						title: "申请中"
					})
					let data = {
						...this.formData,
						identity: JSON.stringify(this.formData.identity.map((i, index) => ({
							...i,
							sort: index + 1
						}))),
					}
					circle_host(data).then(res => {
						uni.hideLoading()
						uni.$u.toast("申请成功")
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/circle/circle'
							})
						}, 1500)
					})
				})
			},
		},

	}
</script>

<style lang='scss' scoped>
	.container {
		background-color: #f7f7f9;
		min-height: 100vh;
		padding-bottom: 20rpx;

		.form-item {
			background-color: #fff;
			padding: 0 40rpx;
		}

		.bottom-btn {
			width: 80%;
			text-align: center;
			color: #fff;
			background-color: #242232;
			padding: 20rpx 0;
			margin: 0 auto;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}

	.layout-img-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;

		&>view {
			margin-right: 15rpx;
		}
	}

	.layout-img-list-add {
		width: 151rpx;
		height: 151rpx;
		border-radius: 20rpx;
		/* 	border: 1px solid #999999; */
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.layout-img-list-item {
		width: 151rpx;
		height: 151rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.layout-img-list-item-image {
			border-radius: 20rpx;
		}

		.layout-img-list-item-del {
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			top: -15rpx;
			right: -15rpx;
			z-index: 2;
		}
	}

	.card {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;

		.card-title {
			font-size: 28rpx;
			color: #000;
			border-bottom: 1px solid #eee;
			padding-bottom: 20rpx;
		}

		.description {
			font-size: 24rpx;
			color: #ccc;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.card-switch {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #000;
		}

		.add-btn {
			margin-top: 10rpx;
			width: 400rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #ededed;
			color: #8f8f8f;
		}
	}

	.add {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10rpx 0;

		.add-input {
			flex: 1;
			margin-right: 10rpx;
			height: 60rpx;

			input {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 10rpx;
				font-size: 22rpx;
				color: #000;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
			}

			.add-input-plac {
				font-size: 22rpx;
				color: #000;
			}
		}

		.add-r {
			display: flex;
			align-items: center;
		}

		.tx {}
	}

	.setting {
		.add-input {
			width: 40%;
			flex: none;
		}

		.add-r {}
	}
	.tip {
		width: 100%;
		box-sizing: border-box;
		padding:0 30rpx;
		background: #fff;
	}
	.help {
		width: 750rpx;
		height: 71rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 22rpx 0rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		image {
			width: 32rpx;
			height: 33rpx;
			margin-right: 10rpx;
		}
	}
</style>